<!-- 监测报警记录 -->
<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">报警记录列表</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="m-20px border-0 border-b border-solid border-#E0E0E0"
          label-width="110px"
        >
          <el-form-item label="告警等级">
            <el-select v-model="formInline.gjdj" placeholder="请选择告警等级">
              <el-option v-for="(item, index) in gjdjList" :key="index" :label="item.mc" :value="item.dm" />
            </el-select>
          </el-form-item>
          <el-form-item label="告警类型">
            <el-select v-model="formInline.gjlx" placeholder="请选择告警类型">
              <el-option v-for="(item, index) in gjlxList" :key="index" :label="item.mc" :value="item.dm" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间范围">
            <el-date-picker
              v-model="formInline.times"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>

          <el-form-item label="审核状态">
            <el-select v-model="formInline.shzt" placeholder="请选择审核状态">
              <el-option v-for="(item, index) in shztList" :key="index" :label="item.mc" :value="item.dm" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核结果">
            <el-select v-model="formInline.shjg" placeholder="请选择审核结果">
              <el-option v-for="(item, index) in shjgList" :key="index" :label="item.mc" :value="item.dm" />
            </el-select>
          </el-form-item>
          <el-form-item label="监测点位编号">
            <el-input v-model="formInline.jczdbh" name="jczdbh" type="input" placeholder="请填写监测点位编号"></el-input>
          </el-form-item>

          <div class="mb-10px text-right">
            <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="getPageList" >查询</el-button>
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="reset" >重置</el-button>
          </div>
        </el-form>

        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 260px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query(row)">查看</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="报警信息详情查看" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in bjxxxqFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
      :model="editForm"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input v-model="editForm[item.key]" :type="item.type" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <hr />
    <div class="mb-20px text-[#000] font-bold">报警历史趋势图</div>
    <el-form :inline="true" :model="formInline" class="flex justify-between ml-20px">
      <el-form-item label="选择时间范围" style="margin-right: 0">
        <el-date-picker
          v-model="formInline.times"
          type="daterange"
          range-separator="至"
          unlink-panels
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <div class="text-right">
        <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="getChartData" >查询</el-button>
      </div>
    </el-form>

    <div>
      <Echarts width="940px" height="400px" class="flex-1" ref="notificationEchart" ></Echarts>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import  moment  from "moment"
import { ElMessageBox, ElMessage } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'

const formInline = reactive({
  gjdj: '',
  gjlx: '',
  times: ['',''],
  shzt: '',
  shjg: '',
  jczdbh: '',
})

// 图表ref
const notificationEchart: any = ref(null)

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    prop: 'id',
    label: '序号',
    width: '80',
  },
  {
    prop: 'gjlxMc',
    label: '告警类型',
  },
  {
    prop: 'dwbh',
    label: '监测站点编号',
  },
  {
    prop: 'gjdjMc',
    label: '告警等级',
  },
  {
    prop: 'gjkssj',
    label: '告警开始时间',
  },
  {
    prop: 'gjcxsc',
    label: '告警持续时间',
  },
  {
    prop: 'qymc',
    label: '所属企业部门',
  },
  {
    prop: 'czrlxdh',
    label: '联系电话',
  },
  {
    prop: 'shztMc',
    label: '审核状态',
  },
  {
    prop: 'shjgMc',
    label: '审核结果',
  },
  {
    prop: 'actions',
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]

let tableData = ref([])
// {
//     id: 1,
//     gjlx: '蒸汽告警',
//     jczdbh: '1#锅炉',
//     gjdj: '一级告警',
//     gjkssj: '2023/2/10 18:23',
//     gjcxsj: '2023/2/10 18:55',
//     ssqybm: '瑞恒碳三',
//     lxdh: '18565659898',
//     shzt: '待审核',
//     shjg: '消警',
//   },

//报警信息详情查看
const dialogShow = ref(false)

const bjxxxqFormList = [
  {
    formLabelWidth: '160px',
    formList: [
      {
        label: '告警所属企业部门',
        key: 'qymc',
        type: 'input',
        value: '',
      },
      {
        label: '固定电话',
        key: 'lxdh',
        type: 'input',
        value: '',
      },
      {
        label: '负责人',
        key: 'czrxm',
        type: 'input',
        value: '',
      },
      {
        label: '联系电话',
        key: 'czrlxdh',
        type: 'input',
        value: '',
      },
      {
        label: '监测值',
        key: 'gjcez',
        type: 'input',
        value: '',
      },
      {
        label: '告警阈值',
        key: 'lxdh',
        type: 'input',
        value: '',
      },
      {
        label: '单位',
        key: 'dw',
        type: 'input',
        value: '℃',
      },
      {
        label: '告警开始时间',
        key: 'gjkssj',
        type: 'input',
        value: '',
      },
      {
        label: '告警持续时间',
        key: 'gjcxsc',
        type: 'input',
        value: '',
      },
      {
        label: '监测项目',
        key: 'lxdh',
        type: 'input',
        value: '',
      },
      {
        label: '告警类型',
        key: 'gjlxMc',
        type: 'input',
        value: '',
      },
      {
        label: '告警等级',
        key: 'gjdjMc',
        type: 'input',
        value: '',
      },
      {
        label: '监测点位编号',
        key: 'dwbh',
        type: 'input',
        value: '',
      },
      {
        label: '审核状态',
        key: 'shztMc',
        type: 'input',
        value: '',
      },
      {
        label: '审核结果',
        key: 'shjgMc',
        type: 'input',
        value: '',
      },
      {
        label: '审核人',
        key: 'shr',
        type: 'input',
        value: '',
      },
      {
        label: '警情描述',
        key: 'jqms',
        type: 'textarea',
        span: 24,
      },
    ],
  },
]

//查询 图表

let chartInline = ref({
  times: [moment().format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]
})
const getChartData = async () =>{
  let data ={
    jgsj: 2,
    mbId: editForm.value?.jcdwid,
    mblx: 2,
    nylx: editForm.value?.nylx || 1,
    szlx: 1,
    xzcs: editForm.value?.jclx || 1,
    ymlx: 1,
    startTime: chartInline.value.times[0],
    endTime: chartInline.value.times[1],
  }
  let dwHistoryResp: any = {}
  await queryJcdwTbInfo(data).then((res: any) => {
    dwHistoryResp = res.dwHistoryResp
  }).catch((error)=>{
    ElMessage({message: "操作失败! " + error?.response?.data?.result?.resultMessage ,type: 'error'})
  })

  let ylx = dwHistoryResp?.dwHistoryInfoList[0]?.ylx
  let ylxDw = dwHistoryResp?.dwHistoryInfoList[0]?.ylxDw
  let xData =  dwHistoryResp?.sjList
  let yData =  dwHistoryResp?.dwHistoryInfoList[0]?.ylz


  const bjxxChartOption: any = {
    grid: {
      top: 50,
      left: 40,
      right: 0,
      bottom: 20,
    },
    title: {
      text: ylx + ylxDw,
      textStyle: {
        fontWeight: 'normal',
      },
      left: 'right',
      // top: 'center',
    },
    legend: {
      data: [ylx],
      left: 'left',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: false,
      },
      backgroundColor: 'rgba(16,16,52,0.6)',
      textStyle: {
        color: 'white',
      },
    },
    xAxis: {
      type: 'category',
      splitLine: {
        show: false,
      },
      data: xData,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: ylx,
        type: 'line',
        showSymbol: false,
        itemStyle: {
          normal: {
            color: '#3AB779',
            lineStyle: {
              color: '#3AB779',
            },
          },
        },
        data: yData,
      },
    ],
  }
  
  //没数据给个提示
  if(yData==null || yData==undefined || yData.length<=0){
    bjxxChartOption.graphic = [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          fill: '#999',
          text: '暂无数据',
          font: '14px Microsoft YaHei',
        },
      },
    ]
  }
  //调echart 初始化方法
  nextTick(() => {
    notificationEchart.value.initEchat(bjxxChartOption)
  })

}


//删除
const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}

//查看
const editForm: any = ref({})
const query = (row: any) => {
  editForm.value = row
  dialogShow.value = true
  getChartData()
}


//分页查询
let pageNo = ref(1)
let pageSize = ref(10)
let tableTotal = ref(0)
const getPageList = () =>{
  let data ={
    gjdj: formInline.gjdj,
    gjlx: formInline.gjlx,
    shzt: formInline.shzt,
    shjg: formInline.shjg,
    jcdwbhVal: formInline.jczdbh,
    gjsdKssj: formInline.times[0],
    gjsdJssj: formInline.times[1],
    pageNo: pageNo.value,
    pageSize: pageSize.value
  }
  queryPageBjjl(data).then((res: any) => {
    tableData.value = res.records
    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
//重置
const reset = () =>{
  pageNo.value = 1
  pageSize.value = 10
  formInline.gjdj = ''
  formInline.gjlx = '',
  formInline.times = ['','']
  formInline.shzt = ''
  formInline.shjg = ''
  formInline.jczdbh = ''
}
//分页按钮
const handleSizeChange = (val: number) =>{
  console.log(`每页 ${val} 条`);
  pageSize.value = val
  getPageList()
}
const handleCurrentChange = (val: number) =>{
  console.log(`当前页: ${val}`);
  pageNo.value = val
  getPageList()
}

//加载告警等级
const gjdjList = ref([])
const getGjdj = () => {
  queryZdInfo({ zdxdm: 'gjdj' }).then((res: any) => {
    gjdjList.value = res
  })
}
//加载告警类型
const gjlxList = ref([])
const getGjlx = () => {
  queryZdInfo({ zdxdm: 'gjlx' }).then((res: any) => {
    gjlxList.value = res
  })
}
//加载审核状态
const shztList = ref([])
const getShzt = () => {
  queryZdInfo({ zdxdm: 'shzt' }).then((res: any) => {
    shztList.value = res
  })
}
//加载审核结果
const shjgList = ref([])
const getShjg = () => {
  queryZdInfo({ zdxdm: 'shjg' }).then((res: any) => {
    shjgList.value = res
  })
}

//初始化
onMounted(() => {
  getPageList()
  getGjdj()
  getGjlx()
  getShzt()
  getShjg()
})
</script>

<style>
hr {
  margin-bottom: 18px;
  border: 0;
  border-bottom: 1px solid #ededed;
}
</style>
